<template>
  <u-popup
    class="filter-aside-container"
    :show="isShowAside"
    mode="left"
    @close="$bus.$emit('hideAside')"
  >
    <view class="aside-container">
      <view class="cate-item" v-for="cate in cateList" :key="cate.bid">
        <view class="name" @click.stop="toCatePage(cate.bid)">
          {{ cate.bname }}
          <text class="count">{{ cate.num }}</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="taste filter" v-show="cate.list.length">
          <view @click="isShowTaste = !isShowTaste">
            口味筛选
            <view class="count">{{ cate.list.length }}</view>
            <view class="iconfont icon-xiala"></view>
          </view>
          <view
            class="tname"
            v-for="taste in cate.list"
            :key="taste.tid"
            v-show="isShowTaste"
            @click="toFilterSearch(taste, 1)"
          >
            {{ taste.tname }}
          </view>
        </view>
        <view class="scene filter" v-show="cate.scene.length">
          <view @click="isShowScene = !isShowScene">
            场景筛选
            <view class="count">{{ cate.scene.length }}</view>
            <view class="iconfont icon-xiala"></view>
          </view>
          <view
            class="tname"
            v-for="scene in cate.scene"
            :key="scene.tid"
            v-show="isShowScene"
            @click="toFilterSearch(scene, 2)"
          >
            {{ scene.tname }}
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'filter-aside',
  data() {
    return {
      isShowAside: false,
      cateList: [],
      isShowTaste: false,
      isShowScene: false,
    }
  },
  methods: {
    // 获取分类列表
    async getCategoryList() {
      try {
        const categoryListData = await this.$get('/1.1/classes/classify')
        this.cateList = categoryListData.results
      } catch (e) {
        console.log(e)
      }
    },
    // 跳转商品分类页面
    toCatePage(bid) {
      uni.switchTab({
        url: '/pages/category/category',
        success: function () {
          getApp().globalData.paramsData = {
            bid,
          }
        },
      })
    },
    // 跳转搜索筛选页
    toFilterSearch({ bid, tid }, type) {
      // 根据不同的场景往vuex存储不同的参数
      const params = { bcid: bid }
      type === 1 ? (params.fid = tid) : (params.sid = tid)
      this.$store.commit('filterSearch/updateParams', params)
      uni.navigateTo({
        url: '/pages/filter-search/filter-search',
      })
    },
  },
  mounted() {
    this.getCategoryList()
    // 让所有的侧边栏一起显示或隐藏
    this.$bus.$on('showAside', () => {
      this.isShowAside = true
    })
    this.$bus.$on('hideAside', () => {
      this.isShowAside = false
    })
  },
}
</script>

<style lang="scss">
.aside-container {
  padding: 100rpx 40rpx;
  width: 350rpx;
  .cate-item {
    font-size: $lxins-fs-14;
    .name {
      position: relative;
      padding: 20rpx 0;
      border-bottom: 1px solid #ccc;
    }
    .icon-arrow-right,
    .icon-xiala {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
    .count {
      display: inline-block;
      width: 34rpx;
      height: 34rpx;
      text-align: center;
      line-height: 34rpx;
      margin-left: 20rpx;
      font-size: $lxins-fs-12;
      background-color: orange;
      border-radius: 50%;
      color: #eee;
    }

    .filter {
      margin: 20rpx;
      margin-bottom: 0;
      line-height: 44rpx;
      // padding-bottom: 20rpx;
      border-bottom: 1px solid #ccc;
      & > view {
        position: relative;
      }
      .count {
        background-color: orangered;
      }
      .tname {
        text-indent: 12rpx;
        line-height: 54rpx;
      }
    }
  }
}
</style>
